'use client'
import styles from "./Card.module.css";
import Image, {ImageLoaderProps} from "next/image";
import React from "react";

type CardProps = {
    id: number;
    name: string;
    image: string;
    details: React.ReactNode;
    link: string;
};


export default function Card({id, name, image, details, link}: CardProps) {
    return (
        <div className={styles.card}>
            <a href={link}>
                {image ?
                    <Image
                        src={image}
                        alt={name}
                        className={styles.card__image}
                        width={320}
                        height={240}
                        quality={100}
                        priority={true}
                    />
                    :
                    <div className={styles.card__image_alt}>Нет картинки</div>
                }
                <div className={styles.card__content}>
                    <h2 className={styles.card__title}>{name}</h2>
                    <div className={styles.card__details}>{details}</div>
                </div>
            </a>
        </div>
    );
}
